<template>
	<div class="supply-goods info-1200">
	   <div class="info-title" style="border:none;">
        	<div class="info-name">
        	  <img src="./../../../static/img/index/huoyuanxinxin.png">
        	  <span>货源信息</span>
        	</div>
        	<div class="info-links">
        		<nuxt-link to="./../../info/goods">更多货源信息</nuxt-link>
        	</div>
        </div>
        <!-- 货源列表 -->
		<a-tabs defaultActiveKey="" tabPosition="left" @change="supplyGoodTab" >
			<a-tab-pane tab="全部" key="">
				<supply-goods-list :list="list"></supply-goods-list>
			</a-tab-pane>
			<a-tab-pane tab="轻货" key="1">
				<supply-goods-list :list="list1"></supply-goods-list>
			</a-tab-pane>
			<a-tab-pane tab="重货" key="2">
				<supply-goods-list :list="list2"></supply-goods-list>
			</a-tab-pane>
			<!-- <a-tab-pane tab="同城" key="3">
				<supply-goods-list :list="list3"></supply-goods-list>
			</a-tab-pane>
			<a-tab-pane tab="国际" key="4">
				<supply-goods-list :list="list4"></supply-goods-list>
			</a-tab-pane>
			<a-tab-pane tab="绿色" key="5">
				<supply-goods-list :list="list5"></supply-goods-list>
			</a-tab-pane> -->
		</a-tabs>
	</div>
</template>
<script>
import SupplyGoodsList from './SupplyGoodsList'
export default {
    data() {
      return {
        list1:[],
        list2:[],
        list:[],
        //数据
        key: '',
      }
    },
	components: {
		SupplyGoodsList
	},
    beforeCreate() {
    },
    created() {
    	this.infoGoodsGetCargoByType('');
    },
    watch: {},

    mounted: function() {

    },
    methods: {
      	// 获取货源分类列表查询
      	async infoGoodsGetCargoByType (key) {
			const res = await this.$store.dispatch('info/infoGoodsGetCargoByType',{
				pageSize: 6,
				pageIndex: 1,
				masterCargoType: key
			})
			if (res.status) {
				this['list'+key] = res.data && res.data.rows || [];
			} 
      	},
		// tab切换事件
		supplyGoodTab(key) {
			key = key;
			// this.key = key;
			// this.infoGoodsGetCargoByType();
			if (!this['list'+key].length) this.infoGoodsGetCargoByType(key);
		},
    }
  }
</script>
<style lang="scss" >
.supply-goods{
	.ant-tabs-content{
		height:378px;
		overflow:hidden;
	}
	.ant-tabs{
		width:1200px;
		height:415px;
		border:1px solid #D8D8D8;
		.ant-tabs-ink-bar{
			background-color:#D8D8D8 !important;
			right:0 !important;
		}
		.ant-tabs-left-content{
   			padding-left:0 !important;
   		}
		.ant-tabs-tab{
		    width: 60px;
		    height: 28px;
		    text-align: center;
		    line-height: 28px;
			margin:0 !important;
			padding:0 !important;
			font-size:14px;
			color:#666666;
			margin: 0 auto !important;
   			margin-top: 22px !important;
		}
		.ant-tabs-tab-active{
			color:#FFFFFF;
			background-color:#15837A;
		}
		.ant-tabs-nav-wrap{
			width:90px;
		}
		ul{
			margin:0;
			li{
				width:330px;
				height:171px;
				background:#FFFFFF;
				border:1px solid #EEEEEE;
				float:left;
				margin-left:18px;
				margin-top:18px;
				overflow:hidden;
				.goods-name{
					width:330px;
					height:50px;
					line-height:50px;
					background:#FFF8EE;
					p{
						color:#333333;
						font-size:16px;
						margin-left:15px;
					}
				}
				.goods-detail{
					margin-top:10px;
					p{
						font-size:16px;
						color:#333333;
						display:inline-block;
						margin-left:15px;
					}
					i{
						font-style:normal;
						color:#FFA200;
						font-size:24px;
					}
					span{
						font-size:16px;
						color:#333333;
					}
					p:last-child{
						margin-left:18px;
					}
				}
				.goods-need{
					margin-left:15px;
					margin-top:5px;
					width: 328px;
					span{
						font-size:16px;
						color:#666666;
						display: inline-block;
						width: 175px;
					}
					button{
						//width:80px;
						//height:30px;
						background:#FFA200;
						outline:none;
						border:none;
						font-size:14px;
						text-align:center;
						line-height:30px;
						margin-left:22px;
						color:#FFFFFF;
						float: right;
						margin-right: 25px;
						padding: 0 10px;
					}
				}
			}
		}
	}
}
</style>